<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <div class="centerCenter">
        <img v-if="getIsShow('image')" :src="alioss" alt="图片" >
        <video v-if="getIsShow('video')" :src="alioss" controls="controls">您的浏览器不支持 video 标签。</video>
      </div>
    </div>
    <div style="font-size:14px;line-height:30px;">
      <el-col :span="24">
        <el-col :span="3" style="textAlign:right">文件名：</el-col>
        <span style="text-indent:20px;display:inline-block">{{ rightInfo.key }}</span>
      </el-col>
      <el-col :span="24">
        <el-col :span="3" style="textAlign:right">类型：</el-col>
        <span style="text-indent:20px;display:inline-block">{{ Type }}</span>
      </el-col>
      <el-col :span="24">
        <el-col :span="3" style="textAlign:right">地址：</el-col>
        <span
          style="text-indent:20px;display:inline-block"
        >http://syg-photo.oss-cn-shanghai.aliyuncs.com/{{ id }}</span>
      </el-col>
    </div>
  </div>
</template>
<script>
import { ALIYUN_OSS } from '~/utils/util';
export default {
  props: ['id', 'rightInfo', 'pageHeight', 'updateRight'],
  data() {
    return {
      Type: ''
    }
  },
  computed: {
    alioss() {
      return `${ALIYUN_OSS}${this.$props.id}`
    }
  },
  watch: {
    id() {
      this.getInitData()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getIsShow(res) {
      return this.Type.includes(res)
    },
    getInitData() {
      this.$post({
        url: '/manage/alioss/getObjectInfo',
        data: {
          id: this.id
        }
      }).then(res => {
        this.Type = res['Content-Type']
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    }
  }
}
</script>
<style lang="scss">
.centerCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background: #f5f5f6;
  img {
    max-width: 80%;
    height: 480px;
  }
  video {
    max-width: 100%;
    height: 480px;
  }
}
</style>
